<template>
  <div id="app">
    <!-- header -->
    <el-header id="header" style="height: 80px" ref="header">
      <div class="container">
        <div class="header_log">
          <img
            src="./assets/images/whitelogo.png"
            alt=""
            ref="blacklog"
            v-if="logchange"
          />
          <img src="./assets/images/bslogo.png" alt="" ref="blacklog" v-else />
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          style="background-color: transparent"
          @select="handleSelect"
        >
          <el-menu-item class="menu_item isbold" index="1"
            >公司背景</el-menu-item
          >
          <el-menu-item class="menu_item" index="2">解决方案</el-menu-item>
          <el-menu-item class="menu_item" index="3">功能体验</el-menu-item>
          <el-menu-item class="menu_item" index="4">平台优势</el-menu-item>
          <el-menu-item class="menu_item" index="5">合作景区</el-menu-item>
          <el-menu-item class="menu_item" index="6">战略合作</el-menu-item>
        </el-menu>
        <div class="datasystem" @click="dialogVisible = true">
          <img v-if="ztchange" src="./assets/images/zt1.png" alt="" />
          <img v-else src="./assets/images/zt2.png" alt="" />
        </div>
      </div>
    </el-header>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>功能暂未开放</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 首页组件 -->
    <Home ref="child" />
    <!-- <router-view /> -->
  </div>
</template>
<script>
import Home from "./views/Home.vue";
// 引入 动画函数
import { scrollAnimation } from "./utils/scrollAnimation";
export default {
  data() {
    return {
      dialogVisible: false,
      activeIndex: "1",
      logchange: true,
      ztchange: true,
    };
  },
  components: {
    Home,
  },
  methods: {
    // 导航栏切换
    handleSelect(index) {
      // ie不兼容
      // window.scrollTo({
      //   top: this.$refs.child.$refs[index].offsetTop - 66,
      //   behavior: "smooth",
      // });
      const currentY =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrollAnimation(currentY, this.$refs.child.$refs[index].offsetTop - 80);
    },
    // 屏幕滚动事件
    windowScroll(e) {
      var el = document.querySelectorAll(".menu_item");
      if (e.target.documentElement.scrollTop >= 100) {
        this.$refs.header.$el.style.backgroundColor = "rgba(255,255,255,1)";
        this.$refs.header.$el.className = "shadow";
        this.logchange = false;
        this.ztchange = false;
        el.forEach(function (item, index) {
          item.style.color = "#222222";
        });
      } else {
        this.$refs.header.$el.className = "";
        this.logchange = true;
        this.ztchange = true;
        this.$refs.header.$el.style.backgroundColor = "transparent";
        el.forEach(function (item, index) {
          item.style.color = "#ffffff";
        });
      }
      var arr = [];
      for (var key in this.$refs.child.$refs) {
        arr.push(this.$refs.child.$refs[key]);
      }
      var that = this;
      arr.slice(0, 6).forEach(function (item, index) {
        if (e.target.documentElement.scrollTop >= item.offsetTop - 150) {
          that.activeIndex = JSON.stringify(index + 1);
        }
      });
    },
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
};
</script>
<style lang="less">
#app {
  #header {
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    background-color: transparent;
    padding: 0px;
    .container {
      display: flex;
      align-items: center;
      height: 80px;
      .header_log {
        width: 60px;
        height: 44px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .el-menu-demo {
        margin-left: 90px;
        border-bottom: none;
        .el-menu-item {
          height: 60px;
          background-color: transparent;
          // border-bottom: 3px solid #409eff;
          font-family: MILanPro--GB1-4, MILanPro--GB1;
          line-height: 60px;
          padding: 0 12px;
          font-size: 16px;
          font-weight: normal;
          color: #ffffff;
          transition: none;
          &:hover {
            background-color: transparent !important;
          }
        }
        .is-active {
          font-family: MILanPro_BOLD--GB1-4, MILanPro_BOLD--GB1;
          background-color: transparent;
          border: none;
          font-weight: bold;
        }
      }
      .datasystem {
        cursor: pointer;
        margin-left: 270px;
        width: 146px;
        height: 33px;
        border-radius: 8px;
        line-height: 33px;
        text-align: center;
      }
    }
  }
  .shadow {
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
  }
}
</style>
